<!-- 
  setup 的使用有两种方式：

      1. setup 函数
        import { ref } from "vue";

        export default {
          setup() {
            const count = ref("hello");
          },
        };
      2. setup 语法糖
        <script setup></script>

  推荐都使用 setup 语法糖【更方便】，如果你有如下的场景时才去使用 setup 函数
      1. 在非单文件组件中使用组合式API时
      2. 组件中想组合式与选项式一起使用时

  setup 语法糖的特点：

      1. 顶层的绑定会被暴露给模板

      2. 组件引入之后，直接到模板中使用即可，无需注册

      3. 使用自定义指令, 使用 v开头来定义即可使用

      4. 使用 defineProps 来声明 props
 -->

<template>
  <div>
    <MyInput v-model="username" />

    <World :count="count" @change="increment" />

    <h1>App</h1>
    <button @click="increment">{{ count }}</button>
    <button @click="sonAge++">sonAge {{ sonAge }}</button>
    <hr />

    <Hello gender="男" />

    <hr />

    <!-- <input v-focus="'hello'" /> -->

    <hr />

    <button v-hello>我的天</button>
  </div>
</template>

<script setup lang="ts">
import { ref, Directive } from "vue";
import MyInput from "./components/MyInput.vue";
import World from "./components/World.vue";
import Hello from "./components/Hello.vue";
import { hello as vHello } from "./directives";

// 自定义指令
//    Directive<T, V>
//        T - 用于设置所绑定元素的类型
//        V - 用于设置 binding.value 的类型
const vFocus: Directive<HTMLInputElement, string> = {
  mounted(el, binding) {
    binding.value;
    el.focus();
  },
};

const count = ref(10);

const sonAge = ref(18);

const username = ref("admin");
1;
const increment = () => {
  count.value++;
};
</script>
